<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程助手 - 与 AI 聊天</title>
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/ai_qa.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI助手</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>

    <!-- 主体内容 -->
    <main class="chat-container">
        <!-- 左侧快速提示区域 -->
        <aside class="chat-suggestions">
            <h3>编程助手快速提示</h3>
            <ul>
                <li><button onclick="fillInput('如何实现快速排序？')">如何实现快速排序？</button></li>
                <li><button onclick="fillInput('什么是二叉树的遍历？')">什么是二叉树的遍历？</button></li>
                <li><button onclick="fillInput('解释一下动态规划算法')">解释一下动态规划算法</button></li>
                <li><button onclick="fillInput('C++中的智能指针是什么？')">C++中的智能指针是什么？</button></li>
            </ul>
        </aside>

        <!-- 聊天窗口 -->
        <section id="chat-section" class="chat-window">
            <div id="chat-history" class="chat-history">
                <!-- 示例消息 -->
                <div class="chat-message bot">
                    <p>您好！请问有什么编程相关的问题可以帮您解答吗？</p>
                    <span class="chat-time">2024-11-20 14:00</span>
                </div>
                <div class="chat-message user">
                    <p>如何实现快速排序？</p>
                    <span class="chat-time">2024-11-20 14:01</span>
                </div>
            </div>
            <div class="chat-input">
                <button id="clear-btn">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </button>
                <input type="text" id="user-input" placeholder="请输入您的编程问题..." />
                <button id="send-btn">
                    <i class="layui-icon layui-icon-release"></i>
                </button>
            </div>
            <!-- 新建对话和历史记录按钮 -->
            <div class="chat-history-actions">
                <button class="new-chat">新建对话</button>
                <button class="chart-history">查看历史</button>
            </div>
        </section>

        <!-- 右侧热门编程主题 -->
        <aside class="chat-topics">
            <h3>热门编程主题</h3>
            <ul>
                <li><button onclick="fillInput('如何实现链表反转？')">如何实现链表反转？</button></li>
                <li><button onclick="fillInput('面向对象编程的四大特性')">面向对象编程的四大特性</button></li>
                <li><button onclick="fillInput('C++中的STL使用技巧')">C++中的STL使用技巧</button></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 编程学习平台。版权所有。</p>
    </footer>

    <script src="../js/ai_qa.js"></script>
</body>

</html>
